<template>
  <div class="my-store">
    <div class="list" v-show="lists && lists.length > 0">
      <div v-for="(item,index) in lists" class="item" @click="router({path: './storeDetails', query: {id: item.id}})">
        <img class="item-img" :src="item.img" alt="">
        <div class="cons">
          <p class="title">{{item.title}}</p>
          <p class="address">
            <span class="address-name">{{item.address}}</span>
            <span class="address-num">245m</span>
          </p>
          <p class="tip">
            <img class="tip-img" src="@/assets/xianxiamendian03.png" alt="">
            <span class="tip-con">{{item.brief}}</span>
          </p>
        </div>
        <i class="icon">已办卡</i>
      </div>
    </div>
    <div class="none" v-show="noDate">
      <img src="@/assets/sousuomendian04.png" alt="">
      <p>暂无相关内容</p>      
    </div>
  </div>
</template>

<script>
  import {mystore} from '@/api/api'
  import none from '@/components/none'
  export default {
    components: {
      none,
    },
    data () {
      return {
        lists:[],
        noDate: false,
      }
    },
    created () {
      this.store()
    },
    methods: {
      router (path) {
        this.$router.push(path)
      },
      store(){
        mystore().then((res) =>{
          this.lists=res.data.data.list
          if(this.lists.length == 0){
            this.noDate = true;
          }
        }).catch((err) => {
          console.dir(err)
        })
      }
    }
  }
</script>

<style lang="stylus" scoped>
.my-store
  min-height 100vh
  background-color #fff
  .list
    padding 0 2rem
    background-color #fff
    .item
      padding 1.5rem 0
      display flex
      border-bottom 1px solid #e6e6e6
      .item-img
        width 12.2rem
        height 9.2rem
        margin-right 1rem
      .cons
        flex 1
        .title
          color #333333
          font-size 1.7rem
          font-weight bold
          white-space nowrap
          overflow hidden
          text-overflow ellipsis
          width calc(100vw - 17.2rem)
        .address
          font-size 1.2rem
          color #999
          overflow hidden
          margin 1.3rem 0
          .address-name
            white-space nowrap
            overflow hidden
            text-overflow ellipsis
            float left
            width calc(100vw - 22.2rem)
          .address-num
            float right
            text-align right
        .tip
          overflow hidden
          .tip-img
            width 1.6rem
            height 1.6rem
            float left
          .tip-con
            float left
            margin-left .5rem
            white-space nowrap
            overflow hidden
            text-overflow ellipsis
            width calc(100vw - 21.2rem)
            color #172F6D
      .icon
        position absolute
        width 5rem
        height 2.2rem
        background linear-gradient(0deg,rgba(180,48,20,1) 0%,rgba(210,56,24,1) 100%)
        font-size 1.2rem
        color #fff
        text-align center
        line-height 2.2rem
  .none
    img
      position absolute
      top 20.3rem
      width 7.25rem
      left 50%
      margin-left -3.625rem
    p
      color #666
      font-size 1.3rem
      text-align center
      position absolute
      width 100%
      top 32rem
</style>
